import React, { useEffect, useState } from 'react'
import styles from "./css/addConsumer.less"
import { Select, Form, Input, Button, message, Radio } from 'antd';
import { useDispatch } from 'umi'
import { IAddUser } from '@/utils/interface';
const addConsumer: React.FC = () => {
    const [form1] = Form.useForm();
    const [form2] = Form.useForm();
    const [form3] = Form.useForm();
    const [form4] = Form.useForm();
    const [form5] = Form.useForm();
    const [form6] = Form.useForm();
    const dispatch = useDispatch()
    type LayoutType = Parameters<typeof Form>[0]['layout'];
    const [formLayout, setFormLayout] = useState<LayoutType>('horizontal');
    const onFormLayoutChange = ({ layout }: { layout: LayoutType }) => {
        setFormLayout(layout);
        console.log("1");
    };
    const tailLayout = {
        wrapperCol: { offset: 1, span: 22 },
    };
    const editorLayout = {
        wrapperCol: { offset: 1, span: 8 }
    }
    const { Option } = Select;
    const onResetOne = () => {
        form1.resetFields();
    }
    function onResetTwo() {
        form2.resetFields();
    }
    function onResetThree() {
        form3.resetFields();
    }
    function onResetFour() {
        form4.resetFields();
    }
    function onResetFive() {
        form5.resetFields();
    }
    function onResetSix() {
        form6.resetFields();
    }
    function onFinish1(value: IAddUser) {
        const obj: IAddUser = {
            user_name: '',
            user_pwd: '',
            identity_id: '',
        }
        obj.user_name = value.user_name;
        obj.user_pwd = value.user_pwd;
        obj.identity_id = value.identity_id;
        let result = dispatch({
            type: 'people/setAddUser',
            payload: obj,
        });
        (result as unknown as Promise<{ code: number, msg: string }>).then(res => {
            if (res.code === 1) {
                message.success(res.msg);
            } else {
                message.error(res.msg);
            }
            form1.resetFields();
        })
    }
    function onFinish2(value: { identity_text: string }) {
        let obj: { identity_text?: string } = {}
        obj.identity_text = value.identity_text
        let result = dispatch({
            type: 'people/setAddiIdentity',
            payload: obj,
        });
        (result as unknown as Promise<{ code: number, msg: string }>).then(res => {
            if (res.code === 1) {
                message.success(res.msg);
            } else {
                message.error(res.msg);
            }
            form1.resetFields();
        })
    }
    return <div className={styles.wrap}>
        <h1>添加用户</h1>
        <div className={styles.box}>
            <div>
                <Form form={form1} onFinish={onFinish1} name="control-hooks" onValuesChange={onFormLayoutChange} layout={formLayout} initialValues={{ layout: formLayout }}>
                    <Form.Item name="layout" className={styles.header} >
                        <Radio.Group value={formLayout}>
                            <Radio.Button value="horizontal" className={styles.radio}>添加用户</Radio.Button>
                            <Radio.Button value="vertical" className={styles.radio}>更新用户</Radio.Button>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item name='user_name' {...tailLayout}>
                        <Input placeholder='请输入用户名' />
                    </Form.Item>
                    <Form.Item name='user_pwd' {...tailLayout}>
                        <Input placeholder='请输入密码' />
                    </Form.Item >
                    {
                        formLayout === "vertical" ? <Form.Item {...editorLayout} name='paw'>
                            <Select placeholder='请选择身份信息'>

                            </Select>
                        </Form.Item> : null
                    }
                    <Form.Item name='identity_id' {...editorLayout}>
                        <Select placeholder='请选择身份信息' className={styles.select}>
                            <Option value='63no9p-8y0k4'>管理员</Option>
                            <Option value='uf81yn-hv8uvv'>出题者</Option>
                            <Option value='zi0gu7-v7dy08'>浏览者</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item >
                        <Button className={styles.sub} type="primary" htmlType="submit">确认1</Button>
                        <Button htmlType="button" onClick={onResetOne} className={styles.reset}>
                            重置
                            </Button>
                    </Form.Item>
                </Form >
            </div>
            <div>
                <Form form={form2} initialValues={{ layout: formLayout }} layout={formLayout} onFinish={onFinish2}>
                    <Form.Item name="layout" className={styles.header} >
                        <Radio.Group value={formLayout}>
                            <Radio.Button value="horizontal" className={styles.radio}>添加身份</Radio.Button>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item name='identity_text' {...tailLayout}>
                        <Input placeholder='请输入身份名称' />
                    </Form.Item>
                    <Button className={styles.sub} type="primary" htmlType="submit">确认2</Button>
                    <Button htmlType="button" onClick={onResetTwo} className={styles.reset}>
                        重置
                    </Button>
                </Form>
            </div>
            <div>
                <Form form={form3} initialValues={{ layout: formLayout }}>
                    <Form.Item name="layout" className={styles.header} >
                        <Radio.Group value={formLayout}>
                            <Radio.Button value="horizontal" className={styles.radio}>添加api接口权限</Radio.Button>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item name='user' {...tailLayout}>
                        <Input placeholder='请输入api接口权限名称' />
                    </Form.Item>
                    <Form.Item name='pwd' {...tailLayout}>
                        <Input placeholder='请输入api接口权限url' />
                    </Form.Item>
                    <Form.Item name='name' {...tailLayout}>
                        <Input placeholder='请输入api接口权限方法' />
                    </Form.Item>
                    <Button className={styles.sub} type="primary" htmlType="submit">确认3</Button>
                    <Button htmlType="button" onClick={onResetThree} className={styles.reset}>
                        重置
                        </Button>
                </Form>
            </div>
            <div>
                <Form form={form4} initialValues={{ layout: formLayout }}>
                    <Form.Item name="layout" className={styles.header} >
                        <Radio.Group value={formLayout}>
                            <Radio.Button value="horizontal" className={styles.radio}>添加视图接口权限</Radio.Button>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item name='id' {...editorLayout}>
                        <Select placeholder='请选择已有试图'>
                            <Option value='管理员'>管理员</Option>
                            <Option value='出题者'>出题者</Option>
                            <Option value='浏览者'>浏览者</Option>
                        </Select>
                    </Form.Item>
                    <Button className={styles.sub} type="primary" htmlType="submit">确认4</Button>
                    <Button htmlType="button" onClick={onResetFour} className={styles.reset}>
                        重置
                    </Button>
                </Form>
            </div>
            <div>
                <Form form={form5} initialValues={{ layout: formLayout }}>
                    <Form.Item name="layout" className={styles.header} >
                        <Radio.Group value={formLayout}>
                            <Radio.Button value="horizontal" className={styles.radio}>给身份api接口权限</Radio.Button>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item name='id' {...editorLayout}>
                        <Select placeholder='请选择身份id'>
                            <Option value='管理员'>管理员</Option>
                            <Option value='出题者'>出题者</Option>
                            <Option value='浏览者'>浏览者</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name='id' {...editorLayout}>
                        <Select placeholder='请输入api接口权限名称'>
                            <Option value='管理员'>管理员</Option>
                            <Option value='出题者'>出题者</Option>
                            <Option value='浏览者'>浏览者</Option>
                        </Select>
                    </Form.Item>
                    <Button className={styles.sub} type="primary" htmlType="submit">确认5</Button>
                    <Button htmlType="button" onClick={onResetFive} className={styles.reset}>
                        重置
                    </Button>
                </Form>
            </div>
            <div>
                <Form form={form6} initialValues={{ layout: formLayout }}>
                    <Form.Item name="layout" className={styles.header} >
                        <Radio.Group value={formLayout}>
                            <Radio.Button value="horizontal" className={styles.radio}>给身份视图设置权限</Radio.Button>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item name='id' {...editorLayout}>
                        <Select placeholder='请选择身份id'>
                            <Option value='管理员'>管理员</Option>
                            <Option value='出题者'>出题者</Option>
                            <Option value='浏览者'>浏览者</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name='id' {...editorLayout}>
                        <Select placeholder='请选择试图权限id'>

                        </Select>
                    </Form.Item>
                    <Button className={styles.sub} type="primary" htmlType="submit">确认6</Button>
                    <Button htmlType="button" onClick={onResetSix} className={styles.reset}>
                        重置
                    </Button>
                </Form>
            </div>
        </div>
    </div>
}
export default addConsumer